<template>
	<view class="page">
		<view class="h30"></view>
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true" style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks" style="border-radius: 0;">
			<view v-if="showEchart" class="chart-box">
				<l-echart style="width: 655rpx;height: 550rpx;" ref="tiredChartDetails"></l-echart>
				<view style="text-align: center;color: #8c8c8c;padding: 20rpx 0;">{{ecgTime}}</view>
			</view>
			<view v-else class="blocks" style="height: 550rpx;display: flex;align-items: center;justify-content: center;color: #ccc;">
				暂无数据
			</view>
		</view>
		<view class="h30"></view>
		<view class="blocks flex-SB" style="height: 120rpx;background: #fff;line-height: 120rpx;">
			<view class="itme-txt">心脏健康</view>
			<view class="itme-txt">{{formatRes(result)}}</view>
		</view>

		<view class="h30"></view>
		<view class="blocks flex-SB" style="height: 120rpx;background: #fff;line-height: 120rpx;">
			<view class="itme-txt">静息心率</view>
			<view class="itme-txt">{{hr}}/次</view>
		</view>
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				ecgTime:'',
				hr: '-',
				showCal: false,
				showEchart: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year}-${month}-${date-100}`,
				nowData: null,
				result:""
			};
		},
		onLoad(opt) {
			let {
				dateTime
			} = opt;
			this.dateTime = dateTime;
			// this.dateTime = "2025-06-24";
			// this.initPage(this.dateTime);
		},
		onReady() {
			this.initPage(this.dateTime);
		},
		methods: {
			formatRes(idx){
				if(idx==""){
					return "";
				}
				if(idx==0){
					return "无结果，有干扰或者数据异常";
				}
				if(idx==1){
					return "窦性心率";
				}
				if(idx==2){
					return "窦性心率缓";
				}
				if(idx==3){
					return "窦性心率速";
				}
				if(idx==4){
					return "心率不起（早搏）";
				}
				if(idx==5){
					return "心率不起（房颤）";
				}
				if(idx==6){
					return "心率过速（室上性心动过速）";
				}
			},
			initPage(dateTime) {
				if(this.$refs.tiredChartDetails){
					this.$refs.tiredChartDetails.dispose()
				}
				this.hr = '-';
				
				uni.$u.http.post('/client/watch_health_data/type', { 
					imei: this.member.imei,
					type:7,
					date:dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					this.result = res.data.result;
					if(res.status!=200) return;
					this.showEchart = false;
					let date = [];
					let ecgarr = [];
					if (res.data.value) {
						ecgarr = res.data.value;
						if (ecgarr.length) {
							this.showEchart = true;
							// let initdata = ecgarr;
							let initdata = [];
							// for(let i in ecgarr){
							// 	let evals = Math.abs(ecgarr[i]) - Math.abs(res.data.avgEcg);
							// 	initdata.push(evals)
							// }
							for (let i in ecgarr) {
								// date.push(i)
								if (res.data.direction == -1) {
									initdata.push(ecgarr[i]);
									// initdata.push(0-ecgarr[i]);
								} else {
									// initdata.push(ecgarr[i]);
									initdata.push(Math.abs(ecgarr[i]));
								}
							}
							let avgint = 0;
							if (res.data.direction == -1) {
								avgint = parseInt(res.data.avgEcg);
							}else{
								avgint = Math.abs(parseInt(res.data.avgEcg))
							}
							// console.log(initdata);
							this.initEcgChart(initdata, date,avgint);
						}
						this.hr = res.data.hr;
						this.ecgTime = res.data.data_time;
					}
				});
			},
			datechange(e){
				this.showCal = false;
				let dstr = e.fulldate;
				if(this.dateTime == dstr){
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initEcgChart(data, date,avg) {
				console.log(avg);
				function func(x) {
					x /= 10;
					return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50-10;
				}
				function generateData() {
					let data = [];
					for (let i = -50; i <= 20; i += 0.1) {
						data.push([i, func(i)]);
					}
					return data;
				}
				let option = {
					animation: false,
					grid: {
						top: 2,
						left: 0,
						right: 0,
						bottom: 0
					},
					xAxis: {
						show: false,
						type: 'category',
						axisLabel: {
							show: false
						}
					},
					yAxis: {
						// show: false,
						type: 'value',
						min: avg-3000,
						max: avg+3000,
						// axisLabel: {
						// 	show: false
						// }
					},
					series: [{
						type: 'line',
						showSymbol: false,
						itemStyle: {
							shadowBlur: {
								shadowColor: 'rgba(255, 70, 131, 1)',
								shadowBlur: 1120,
								shadowOffsetY: -2
							},
							color: 'rgb(255, 70, 131)'
						},
						lineStyle: {
							shadowColor: 'rgb(255, 77, 49)',
							shadowBlur: 7.5,
							shadowOffsetX: 0,
							shadowOffsetY: 6
						},
						// data: generateData()
						data
					}]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.blocks {
		width: 655rpx;
	}
	.itme-txt{
		padding: 0 20rpx;
	}
</style>